<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button id="btn">清除延迟器</button>
  <script>
    // js  ECMAscript   if for var function 数据类型 等
    //  DOM  
    // var box=document.getElementById()   获取DOM 元素
    // box.style.fontSize="50px"           给DOM元素修改样式
    // box.onclick=function(){}            给DOM元素绑定事件
    // inp.value                          获取表单元素的值
    // box.innerHTML="内容"                 设置元素内容

    // BOM  定时器  最大的对象 window  可以省略window


    // 定时器    setInterval(fn,时间)   每个固定时间执行一次函数
    // 时间 为毫秒数
    var x = 8;
    var timer = setInterval(function () {
      // console.log("你好")
      console.log(++x)
      if (x === 15) {
        // 清除定时器的方法  clearInterval(定时器的名字)
        clearInterval(timer)
      }
    }, 2000)


    //延迟器  setTimeout(fn,2000); 固定时间后执行一次函数
    var timer2 = setTimeout(function () {
      alert("你好")
    }, 4000);

    var btn = document.getElementById("btn");//获取按钮
    btn.onclick = function () {
      // 点击清除延迟器
      clearTimeout(timer2)
    }





  </script>
</body>

</html>